<script setup lang="ts">
import myTitle from "@/components/myTitle/myTitle.vue";
import DoctorAPI from "@/api/system/doctor";
import { type CommentList } from "@/types/consult";

const title = ref("患者评价");
const star = ref<string>("");
const commentList = ref<CommentList>([]);

const value = ref<number[]>([0, 1, 2, 3, 4, 5]);
onLoad(async (option) => {
  if (option) {
    const res = await DoctorAPI.getDoctorInfo(option.id);
    if (res !== undefined) {
      star.value = res.star;
    }
    const result = await DoctorAPI.getComment(option.commentId);
    if (result !== undefined && result.length > 0) {
      commentList.value = commentList.value.concat(result);
      console.log(commentList.value);
    }
  }
});
</script>

<template>
  <view class="bg-[#fff]">
    <view>
      <myTitle :title="title" :if-text="true" />
    </view>
    <view class="mt-40rpx m-auto w-[95%] justify-between items-center flex">
      <view>
        患者评价
        <text class="text-[#787878]">({{ commentList.length }})</text>
      </view>
      <view>
        评分
        <text class="text-[#18c3a4]">{{ star }}</text>
      </view>
    </view>

    <view v-for="item in commentList" :key="item._id">
      <view class="mt-40rpx m-auto w-[95%] justify-between flex items-center">
        <view>{{ item.name }}</view>
        <view><wd-rate v-model="value[Math.floor(Number(item.star))]" readonly /></view>
      </view>
      <view style="width: 95%; margin: auto; margin-top: 35rpx; font-size: 27rpx">
        <view>{{ item.content }}</view>
      </view>
      <view style="margin-top: 20rpx; margin-left: 2.5%; font-size: 20rpx; color: #ccccce">
        {{ item.time }}
      </view>
    </view>

    <view
      style="
        box-sizing: border-box;
        width: 95%;
        padding: 20rpx;
        margin: auto;
        margin-top: 30rpx;
        background-color: #fafafa;
      "
    >
      <view style="font-size: 30rpx">医生回复</view>
      <view style="margin-top: 20rpx; font-size: 25rpx; color: #b1b2b4">感谢您的肯定</view>
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
